<template>
	<div class="page">
		<c-title :hide="false" text="就诊人管理"></c-title>
		<div class="content">
			<div class="list" v-for="(item,index) in list" :key="index" @click="godetail(item)">
				<div class="name item">
					<div class="l name">就诊人姓名</div>
					<div class="r">
						{{item.name}}
					</div>
				</div>
				<div class="mobile item">
					<div class="l">
						就诊人手机号
					</div>
					<div class="r">
						{{item.phone}}
					</div>
				</div>
				<div class="idc item">
					<div class="l">
						就诊人身份证号
					</div>
					<div class="r">
						{{item.id_card}}
					</div>
				</div>
				<div class="bottom">
					<div class="bl">
						
					</div>
					<div class="br" @click.stop="del(item)">
						删除
					</div>
				</div>
			</div>
		</div>
		<div class="add" @click="show = true">添加就诊人</div>

		<van-popup v-model:show="show" position="center" style="width: 80%;" round>
			<div class="yybox">




				<div class="title">
					添加就诊人
				</div>


				<van-cell-group inset>
					<!-- 输入任意文本 -->
					<van-field v-model="name" label="就诊人" placeholder="请输入就诊人姓名" />
					<!-- 输入手机号，调起手机号键盘 -->
					<van-field v-model="id_card" label="有效证件" placeholder="请输入就诊人身份证件" />
					<!-- 允许输入正整数，调起纯数字键盘 -->
					<van-field v-model="phone" type="tel" label="手机号" placeholder="请输入就诊人手机号" />

				</van-cell-group>
				<div class="qd" @click="add">
					确定
				</div>
			</div>

			<!-- 		<van-datetime-picker v-model="currentDate" type="datetime" title="选择就医时间" :min-date="minDate"
						:max-date="maxDate" @cancel='show =false' @confirm='selecttime' /> -->
		</van-popup>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';
	export default {
		data() {
			return {
				list: [],
				show: false,
				name: '',
				id_card: '',
				phone: ''
			}
		},
		activated() {
			this.getlist()
		},
		methods: {
			del(item){
				console.log(11)
				$http
					.post("plugin.hft-yh.api.index.del_patient", {
						patient_id: item.id,
					
					})
					.then(response => {
						console.log(response)
						if (response.result === 1) {
							Toast('删除成功！')
							this.getlist()
							// this.data = response.data
						} else {
							Toast(response.msg);
						}
					})
					.catch(error => {
						console.log(error);
					});
			},
			godetail(item){
				this.$router.push(this.fun.getUrl("jzrdetail", {}, { ids: item.id  }));
			},
			init() {
				this.show = false
				this.name = ''
				this.id_card = ''
				this.phone = ''
			},
			add() {
				$http
					.post("plugin.hft-yh.api.index.add_patient", {
						name: this.name,
						phone: this.phone,
						id_card: this.id_card

					})
					.then(response => {
						console.log(response)
						if (response.result === 1) {
							Toast('添加成功！')
							this.init()
							this.getlist()
							// this.data = response.data
						} else {
							Toast(response.msg);
						}
					})
					.catch(error => {
						console.log(error);
					});
			},
			getlist() {
				$http
					.post("plugin.hft-yh.api.index.patient_list", {

					})
					.then(response => {
						console.log(response)
						if (response.result === 1) {
							this.list = response.data.data
							console.log(this.list)
						} else {
							Toast(response.msg);
						}
					})
					.catch(error => {
						console.log(error);
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yybox {
		padding: 0.5rem;

		.title {
			font-size: 1rem;
			margin-bottom: 1rem;
		}

		.qd {
			background-color: #EB5648;
			color: #fff;
			line-height: 2.5rem;
			margin-top: 1rem;
		}
	}

	.page {
		.content {
			padding: 0.5rem 0.5rem 3rem 0.5rem;

			.list {
				background-color: #fff;
				border-radius: 0.5rem;
				margin-bottom: 0.5rem;
				padding: 0.5rem;
				font-size: 1rem;
				.bottom{
					display: flex;
					justify-content: space-between;
					.br{
						background-color: #EB5648;
					color: #fff;
					padding: 0.5rem;
					
					}
				}
				.mobile{
					.l{
						letter-spacing: 0.5rem;
					}
				}
				.idc{
					.l{
						letter-spacing: 0.2rem;
					}
				}
				.item {
					display: flex;
					margin-bottom: 0.5rem;
				
					.name{
						letter-spacing: 0.8rem;
					}
					.l{
						width: 10rem;
						color: #AEAEAE;	
						text-align: left;
						// font-weight: 600;
					}
				}
			}
		}

		.add {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #EB5648;
			color: #fff;
			text-align: center;
			line-height: 3rem;
			font-size: 1rem;

		}
	}
</style>
